<template>
  <div id="root">
    <Navbar />
    <div class="app-main">
      <slot />
    </div>
    <Footer />
  </div>
</template>
<script setup lang="ts">
import Navbar from './Default/Navbar.vue'
import Footer from './Default/Footer.vue'
import { ProjectName } from '~~/config'

const sideNav = ref<boolean>(false)

const toggleSideNav = (): boolean => (sideNav.value = !sideNav.value)

provide('sideNav', sideNav)
provide('toggleSideNav', toggleSideNav)

useHead({
  titleTemplate: `%s - ${ProjectName}`,
  bodyAttrs: {
    class: 'light',
  },
})
</script>
